<template>
  <div class="login-form">
    <div class="title">欢迎登录</div>
    <a-form :model="formState" name="horizontal_login" layout="vertical" autocomplete="off" @finish="onFinish">
      <a-form-item name="name" :rules="[{ required: true, message: '请输入用户名' }]">
        <a-input v-model:value="formState.name" placeholder="请输入用户名">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
        <a-input-password v-model:value="formState.password" placeholder="请输入密码">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-button style="width: 100%" :disabled="disabled" type="primary" html-type="submit">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { UserApi } from "@/api/index";
import { UserType } from "@/enums/enums";
import { useUserStore } from "@/stores/index";
import { addDynamicRouter } from "@/routers/modules/dynamicRouter";
const router = useRouter();
const userStore = useUserStore();
interface FormState {
  name: string;
  password: string;
}
// 表单字段
const formState = reactive<FormState>({
  name: "",
  password: ""
});

// 提交表单
const onFinish = async (values: any) => {
  const res = await UserApi.userLogin(values);
  if (res.code === 200) {
    userStore.setUserInfo(res.data);
    // 动态路由
    await addDynamicRouter();

    console.log(router.getRoutes());
    // 路由跳转
    if (res.data.role === UserType.Admin) {
      router.replace("/admin/user-manage");
    } else {
      router.replace("/case-all");
    }
  }
};

const disabled = computed(() => {
  return !(formState.name && formState.password);
});
</script>
<style scoped lang="scss">
.login-form {
  width: 300px;
  .title {
    margin-bottom: 24px;
    font-size: 24px;
    color: blue;
  }
}
</style>
